<template>
  <div
    class="nursing-home-card"
    @click="
      $toPage(
        `/pages/zhfw/serviceAgedDetail?placesPicUrl=${row.placesPicUrl}&placesPhone=${row.placesPhone}&placesName=${row.placesName}&placesAddr=${row.placesAddr}`
      )
    "
  >
    <div class="card-image">
      <img :src="row.coverUrl || row.placesPicUrl" />
    </div>
    <div class="card-content">
      <h3 class="title">{{ row.placesName }}</h3>
      <div class="info-item">
        <span class="label">地点：</span>
        <span class="value">{{ row.placesAddr }}</span>
      </div>
      <div class="info-item">
        <span class="label">电话：</span>
        <span class="value">{{ row.placesPhone }}</span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NursingHomeCard',
  props: {
    row: {
      type: Object,
      required: true,
      default: () => ({}),
    },
  },
}
</script>

<style lang="scss" scoped>
.nursing-home-card {
  width: 100%;
  border-radius: 6px;
  overflow: hidden;
  background: $uni-color-success;
  margin-bottom: 12px;
  .card-image {
    height: 100px;
    overflow: hidden;
    padding: 14px 14px 0 14px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .card-content {
    padding: 14px;

    .title {
      font-size: 18px;
      color: $uni-color-primary;
      font-weight: bold;
      margin-bottom: 16px;
    }

    .info-item {
      margin-bottom: 10px;
      font-size: 14px;
      line-height: 20px;

      &:last-child {
        margin-bottom: 0;
      }

      .label {
        color: #333;
      }

      .value {
        color: #666;
      }
    }
  }
}
</style>
